<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex</title>


  <style>
    .main {
      background-color: #ccc;
    }

    .flex {
      display: inline-flex;
      /* flex-direction: row; */
      flex-wrap: nowrap;
      /* flex-flow: row wrap; */
      justify-content: space-between;
      width: 600px;
      height: 200px;
      background-color: greenyellow;
    }

    .flex div {
      /* width: 180px; */

    }

    .p1 {
      /* flex-shrink: 1; */

    }

    .p2 {
      /* flex-shrink: 100; */
    }

    .p3 {
      flex-shrink: 1;
      flex-basis: 200px;
    }

    #content {
      display: flex;
      width: 500px;
    }
  </style>
</head>

<body>


  <div class="main">
    hello
    <div class="flex">
      <p class="p1" style="background-color:lightblue;">文本一文本一文本一文本一文本一</p>
      <p class="p2" style="background-color:brown;">文本二文本二文本二文本二文本二</p>
      <p class="p3" style="background-color:lightgreen;">文本三文本三文本三文本三文本三</p>
    </div>
    world
  </div>

</body>

</html>